<!--
 * @Author: wang
 * @Date: 2020-09-22 18:05:20
 * @LastEditTime: 2020-08-13 09:16:04
 * @LastEditors: wang
 * @Description: 应急调度查看救援队弹窗
 * @FilePath: \c-u-f\src\App.vue
-->
<template>
<div :class="themeClass">
  <div class="Rescue_team_Popup">
    <div class="close_box" @click="close">
       <img src="@/assets/images/close_btn2.png" v-if="theme=='dark'" />
        <img src="@/assets/images/b_close_btn2.png" v-else />
      <!-- <img src="../../assets/images/close_btn2.png" /> -->
    </div>
    <div>
      <div class="input_box" style="margin-top:0;">
        <div class="input_label">队伍名称</div>
        <div class="input_bj">
          <input type="text" />
        </div>
      </div>
      <div class="input_box">
        <div class="input_label">队伍级别</div>
        <div class="input_bj">
          <input type="text" />
        </div>
      </div>
      <div class="input_box">
        <div class="input_label">队伍人数</div>
        <div class="input_bj">
          <input type="text" />
        </div>
      </div>
      <div class="input_box">
        <div class="input_label" style="margin-right:32px;">负责人</div>
        <div class="input_bj">
          <input type="text" />
        </div>
      </div>
      <div class="input_box">
        <div class="input_label" style="margin-right:32px;">联络人</div>
        <div class="input_bj">
          <input type="text" />
        </div>
      </div>
      <div class="input_box">
        <div class="input_label">联系电话</div>
        <div class="input_bj">
          <input type="text" />
        </div>
      </div>
      <!-- 物资储备数量 -->
      <div>
        <div class="material_title">物资储备数量</div>
        <div class="material_box_bj">
          <div class="container">
            <table cellspacing="0">
              <thead>
                <tr>
                  <th>名称</th>
                  <th>型号规格</th>
                  <th>数量</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in list1" :key="index">
                  <td>{{ item.name }}</td>
                  <td>{{ item.model }}</td>
                  <td>{{ item.number }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="input_box" style="margin-top:24px;">
        <div class="input_label" style="color: #FF9140;">已调度人数</div>
        <div class="input_bj2">
          <input type="text" style="color: #FF9140;" />
        </div>
      </div>
      <!-- 已调度物资 -->
      <div>
        <div class="material_title" style="color:#FF9040;">已调度物资</div>
        <div class="Scheduled_materials">
          <div class="container">
            <table cellspacing="0">
              <thead style="color:#8e552e;">
                <tr>
                  <th>名称</th>
                  <th>型号规格</th>
                  <th>数量</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in list1" :key="index">
                  <td>{{ item.name }}</td>
                  <td>{{ item.model }}</td>
                  <td>{{ item.number }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      list1: [
        {
          name: '对讲机',
          model: '2',
          number: '4141'
        },
        {
          name: '对讲机',
          model: '2',
          number: '4141'
        },
        {
          name: '对讲机',
          model: '2',
          number: '4141'
        },
        {
          name: '对讲机',
          model: '2',
          number: '4141'
        },
        {
          name: '对讲机',
          model: '2',
          number: '4141'
        },
        {
          name: '对讲机',
          model: '2',
          number: '4141'
        },
        {
          name: '对讲机',
          model: '2',
          number: '4141'
        }
      ]
    }
  },
  computed: {
    ...mapState(['theme']),
    themeClass () {
      return `theme-${this.theme}`
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.Rescue_team_Popup {
  width: 390px;
  height: 830px;
  // background-image: url('../../assets/images/ranks_detail_bj.png');
  background-size: cover;
  position: absolute;
  top: 67px;
  right: 359px;
  box-sizing: border-box;
  padding-left: 40px;
  z-index: 9999999999999;
  @include themify($themes) {
    background-image: themed('ranks_detail_bj');
  }
}
.close_box {
  box-sizing: border-box;
  padding: 10px;
  text-align: right;
}
.input_box {
  width: 100%;
  height: 30px;
  display: flex;
  margin-top: 15px;
}
.input_label {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
  // color: #57a7c7;
  line-height: 26px;
  // opacity: 0.5;
  margin-left: 16px;
  margin-right: 14px;
  @include themify($themes) {
    color: themed('input_label')
  }
}
.input_bj {
  width: 210px;
  height: 30px;
  // background-image: url('../../assets/images/input_bj1.png');
  background-size: 210px 30px;
  @include themify($themes) {
    background-image: themed('input_bj1')
  }
}
.input_bj2 {
  width: 210px;
  height: 30px;
  // background-image: url('../../assets/images/input_bj2.png');
  background-size: 210px 30px;
  @include themify($themes) {
    background-image: themed('input_bj2')
  }
}
.input_bj input,
.input_bj2 input {
  background: none;
  border: none;
  outline: none;
  margin-left: 10px;
  margin-top: 5px;
  line-height: 23px;
  @include themify($themes) {
    color: themed('input_color')
  }
}
.material_title {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 600;
  // color: #57a7c7;
  line-height: 24px;
  margin-top: 16px;
  @include themify($themes) {
    color: themed('input_label')
  }
  // opacity: 0.5;
}
.material_box_bj {
  width: 310px;
  height: 180px;
  // background-image: url('../../assets/images/wzbj.png');
  // background-size:310px 180px;
  background-size: cover;
  margin: 0 auto;
  position: relative;
  margin-top: 10px;
  @include themify($themes) {
    background-image: themed('wzbj')
  }
}
.Scheduled_materials {
  width: 310px;
  height: 180px;
  // background-image: url('../../assets/images/tab_bj2.png');
  // background-size:310px 180px;
  background-size: cover;
  margin: 0 auto;
  position: relative;
  margin-top: 10px;
  @include themify($themes) {
    background-image: themed('tab_bj2')
  }
}
.container {
  width: 96%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // margin-left:7px;
  // background-color: #2C3A5B;
}

.container table {
  // color: #e6e6e6;
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  @include themify($themes) {
    color: themed('table_color_h');
  }
}

.conatiner table thead,
tbody,
tr,
th,
td {
  display: inline-block;
}

.container table thead {
  width: 100%;
  height: 40px;
  line-height: 40px;
  @include themify($themes) {
    color: themed('table_font_thead');
  }
}

.container table thead tr {
  width: 100%;
  // border-bottom: 1px solid #CCC;
  box-sizing: border-box;
}

.Rescue_team_Popup .container table thead tr th:nth-of-type(1) {
  width: 100px;
}

.Rescue_team_Popup .container table thead tr th:nth-of-type(2) {
  width: 100px;
}

.Rescue_team_Popup .container table thead tr th:nth-of-type(3) {
  width: auto;
}

.Rescue_team_Popup .container table tbody {
  width: 100%;
  max-height: 132px;
  overflow-y: auto;
}
// 滚动条整体部分
  .Rescue_team_Popup .container table tbody::-webkit-scrollbar {
    width: 4px;
  }
  //滚动条里面的滑块
  .material_box_bj .container table tbody::-webkit-scrollbar-thumb {
    height:20px;
    background:#d8eef8;
    // background: rgba(216, 216, 216, 1);
  }
  //滚动条的轨道
  .material_box_bj .container table tbody::-webkit-scrollbar-track {
    background: #415c7b;
    // background: rgba(216, 216, 216, 0.6);
  }
  //滚动条的轨道
  .Scheduled_materials .container table tbody::-webkit-scrollbar-track {
    background: #514037;
    // background: rgba(216, 216, 216, 0.6);
  }
  //滚动条里面的滑块
  .Scheduled_materials .container table tbody::-webkit-scrollbar-thumb {
    height:20px;
    background:#d7b199;
    // background: rgba(216, 216, 216, 1);
  }
.container table tbody tr {
  width: 100%;
  line-height: 40px;
  // border-bottom: 1px solid #CCCCCC;
  box-sizing: border-box;
}

.container table tbody tr:nth-last-of-type(1) {
  border-bottom: none;
}

.container table tbody tr td {
  text-align: center;
}

.Rescue_team_Popup .container table tbody tr td:nth-of-type(1) {
  width: 100px;
}

.Rescue_team_Popup .container table tbody tr td:nth-of-type(2) {
  width: 100px;
}

.Rescue_team_Popup .container table tbody tr td:nth-of-type(3) {
  width: auto;
}
</style>
